<template>
	<view class="MyList">
		<view id="myListTop"></view>
		<slot name="card" :list="lists"></slot>
		<!-- 没有更多 -->
		<view class="no-more-box" v-if="!loading && loadingType=='nomore'  && lists.length>0">
			<slot name="nomore">
				<nomore></nomore>
			</slot>
		</view>
		<!-- 空数据 -->
		<view class="" v-if="!loading && lists.length==0">
			<slot name="nodata">
				<nodata></nodata>
			</slot>
		</view>

		<!--加载动画-->
		<rfLoading v-if="loading"></rfLoading>
	</view>
</template>

<script>
	import rfLoading from "@/components/rf-loading/index.vue";
	export default {
		name: 'MyList',
		components: {
			rfLoading
		},
		props: {
			
			//是否初始化自动请求接口
			autoFirstLoad: {
				type: Boolean,
				default: true
			},
			// 请求参数
			params: {
				type: Object,
				default: () => ({})
			},
			// api接口
			api: {
				type: Function,
				required: true
			},

			// 过滤方法
			filterData: {
				type: Function,
				default: (value) => {
					//#ifndef MP-WEIXIN
					return value
					//#endif
					//#ifdef MP-WEIXIN
					return (value) => {
						return value
					}
					//#endif
				}
			},
			showLoading: {
				type: Boolean,
				default: false
			},
			// 数据转换
			transformRequestData: {
				type: Function,
				default: (data) => {
					//#ifndef MP-WEIXIN
					return data?.data
					//#endif
					//#ifdef MP-WEIXIN
					return (data) => {
						return data?.data
					}
					//#endif
				}
			}
		},
		data() {
			return {
				loadingType: 'more',
				loading: false,
				showLoadingState: false,
				list: [],
				defaultParams: {
					page: 1
				}
			}
		},
		computed: {
			lists() {
				return this.filterData(this.list)
			}
		},
		watch: {
			params: {
				handler: function(val) {
					console.log('watch')
					// 合并请求数据对象
					this.defaultParams = Object.assign(this.defaultParams, val)
					this.loading = false
					this.onRefresh()
				},
				deep: true,
				immediate: true
			}
		},
		created() {

		},
		mounted() {

			// this.autoFirstLoad && this.getList()
			// this.getList()
		},
		methods: {
			scrollTo(num) {
				uni.createSelectorQuery().in(this).select("#myListTop").boundingClientRect((res) => {
					const scrollH = res.top;
					if (scrollH <= 0 && num) {
						uni.pageScrollTo({
							scrollTop: num,
							duration: 0
						})
					}
				}).exec()
			},
			// 刷新
			onRefresh() {
				console.log('onRefresh')
				this.defaultParams.page = 1
				this.list = []
				this.showLoadingState = true
				this.getList()
			},
			// 加载更多
			onMore() {
				if (this.loadingType == 'nomore') return

				this.getList('push')
			},
			// 获取列表
			getList(type) {
				console.log('defaultParams',this.defaultParams)
				if (this.loading) {
					return
				}
				this.loading = true
				if (type == 'push') {
					this.defaultParams.page++
				}
				this.api(this.defaultParams).then((res) => {
					const resList = this.transformRequestData(res) || []
					const {
						limit
					} = this.defaultParams
					if (limit) {
						this.loadingType = resList.length >= limit ? 'more' : 'nomore';
					} else {
						this.loadingType = resList.length > 0 ? 'more' : 'nomore';
					}

					if (type == 'push') {
						this.list = [...this.list, ...resList];
					} else {
						this.list = resList
					}
				}).finally((e) => {
					this.loading = false
					this.showLoadingState = false
					uni.stopPullDownRefresh()
				})

			},
		}
	}
</script>

<style lang="scss" scoped>
	.MyList {
		min-height: 50vh;
	}
</style>
